---
import { getCollection, render, type CollectionEntry } from 'astro:content'
import DocsLayout from '$layouts/DocsLayout.astro'
import MdxCode from '$components/Code/MdxCode.astro'
import ComponentSignature from '$components/ComponentSignature/ComponentSignature.astro'
import QuickNav from '$components/QuickNav/QuickNav.astro'

export async function getStaticPaths() {
  const blogEntries = await getCollection('reference')
  return blogEntries.map((entry) => {
    return {
      params: { slug: entry.id },
      props: { entry }
    }
  })
}

interface Props {
  entry: CollectionEntry<'reference'>
}

const { entry } = Astro.props
const { title, category, componentSignature } = entry.data
const { Content } = await render(entry)
---

<DocsLayout
  {entry}
  title={`${title} | ${category}`}
>
  <h6>
    {category}
  </h6>
  <h1>
    {title}
  </h1>

  <Content components={{ pre: MdxCode }} />

  {
    componentSignature && (
      <div class="mt-12">
        <ComponentSignature
          componentName={title}
          signature={componentSignature}
        />
      </div>
    )
  }

  <QuickNav />
</DocsLayout>
